import { createUseStyles } from "react-jss";
import classnames from "classnames";
import React from "react";
import { Link } from "react-router-dom";
import ImgAdorn from "./assets/adorn.svg";

const useStyle = createUseStyles({
  head: {
    position: "fixed",
    height: "60px",
    background: "#fff",
    padding: "0 41px",
    width: "100%",
    top: 0,
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    zIndex: 2,
  },
  main: {
    display: "flex",
    justifyContent: "center",
    position: "absolute",
    top: "60px",
    bottom: 0,
    left: 0,
    right: 0,
    minWidth: "fit-content",
    background:
      "linear-gradient(18deg, rgba(70, 133, 255, 0.29) 0%, rgba(235, 241, 255, 0.44) 100%);",
  },
  content: {
    position: "relative",
    display: "flex",
    justifyContent: "flex-end",
    height: "100%",
  },
  contentItem: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    background: `url(${ImgAdorn}) no-repeat right 200px`,
    maxWidth: "600px",
    marginRight: "600px",
    marginTop: "-150px",
    paddingRight: "141px",
    backgroundSize: "70%",
  },
  text: {
    padding: "36px 0",
    width: "100%",
    textAlign: "justify",
    animation: "rotation 4s linear",
  },
  linkContainer: {
    display: "flex",
  },
  link: {
    fontSize: "18px",
    fontWeight: 500,
    lineHeight: "25px",
    borderRadius: "24px",
    padding: "11px 23px",
    display: "inline-block",
    marginRight: "24px",
    textDecoration: "none",
  },
  useLink: {
    color: "#fff",
    background: "#037AFF",
    boxShadow: "1px 1px 4px 0px #037AFF",
    "&:hover": {
      color: "#fafafa",
    },
  },
  gitLink: {
    color: "#037AFF",
    background: "#FFFFFF",
    boxShadow: "1px 1px 4px 0px #037AFF",
    display: "flex",
    alignItems: "center",
    gap: "8px",
  },
  ctLogo: {
    position: "absolute",
    bottom: "20px",
    left: "-68px",
    animation: `rotation 2s linear`,
  },
  bgContainer: {
    position: "absolute",
    top: "50%",
    transform: "translateY(-50%)",
    marginTop: "-100px",
  },
  imgIcon: {
    width: "542px",
  },
  cssIcon: {
    width: "122px",
    position: "absolute",
    left: "-40px",
    top: "110px",
    animation: `$drift 2s linear infinite`,
  },
  gearIcon: {
    width: "71px",
    position: "absolute",
    top: "142px",
    right: "215px",
    animation: `$rotation 3s linear infinite`,
  },
  htmlIcon: {
    width: "121px",
    bottom: "-79px",
    right: "60px",
    position: "absolute",
  },
  "@keyframes rotation": {
    from: {
      transform: "rotate(0deg)",
    },
    to: {
      transform: "rotate(360deg)",
    },
  },
  "@keyframes drift": {
    "25%": {
      transform: "translateY(-10px)",
    },
    "50%, 100%": {
      transform: "translateY(0)",
    },
    "75%": {
      transform: "translateY(10px)",
    },
  },
});

import ImgLogo from "./assets/logo.svg";
import ImgGithub from "./assets/github.svg";
import ImgCtin from "./assets/ctin.svg";

import ImgGithubBlue from "./assets/github-blue.svg";
import ImgMascot from "./assets/mascot.svg";

import ImgImg from "./assets/img.svg";
import ImgGear from "./assets/gear.svg";
import ImgCss from "./assets/css.svg";
import ImgHtml from "./assets/html.svg";

export default function Welcome() {
  const classes = useStyle();
  return (
    <div className={classes.page}>
      <div className={classes.head}>
        <img src={ImgLogo} height={47} width={127} alt="" />
        <a>
          <img src={ImgGithub} width={24} height={24} alt="" />
        </a>
      </div>
      <div className={classes.main}>
        <div className={classes.content}>
          <div className={classes.contentItem}>
            <span>
              <img src={ImgCtin} width={510} height={101} alt="" />
            </span>
            <div className={classes.text}>公共组件库</div>
            <div className={classes.linkContainer}>
              <Link
                to="/components?panel=Button"
                className={classnames(classes.link, classes.useLink)}
              >
                开始使用
              </Link>
              <a
                href="https://gitee.com/ct0"
                className={classnames(classes.link, classes.gitLink)}
              >
                <img src={ImgGithubBlue} width={19} height={19} alt="" />
                GitHub
              </a>
            </div>
            <div className={classes.ctLogo}>
              <img src={ImgMascot} width={299} height={172} alt="" />
            </div>
          </div>
          <div className={classes.bgContainer}>
            <img src={ImgImg} className={classes.imgIcon} alt="" />
            <img src={ImgGear} className={classes.gearIcon} alt="" />
            <img src={ImgCss} className={classes.cssIcon} alt="" />
            <img src={ImgHtml} className={classes.htmlIcon} alt="" />
          </div>
        </div>
      </div>
    </div>
  );
}
